<template>
  <div style="width: 100%; height: 100%">

    <vxe-grid ref="tableRef" v-bind="gridOptions">
      <template #toolbar_buttons>
        <Button type="primary" @click="handleCreate">新增部门</Button>
<!--        <ImpExcel @success="excelSuccessFn" dateFormat="YYYY-MM-DD">-->
<!--          <Button class="m-3" :loading="loading"> 导入Excel </Button>-->
<!--        </ImpExcel>-->

      </template>
      <template #action="{ row }">
        <TableAction outside :actions="[
          {
              label:'修改',
              onClick: handleEdit.bind(null, row),
          },
           {
              label:'删除',
              color: 'error',
              loading: row.loading,
              popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, row),
                },
             },
        ]
        " />
      </template>

    </vxe-grid>
    <FormModal @register="register" @success="handleSuccess" />

    <Modal v-model:visible="applyViewShow" title="导入信息有误" @ok="applyViewClose">
      <div>
        <p v-for="(item, index) in msgList">{{ item }} </p>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts" setup>
import {
  BasicTableProps,
  VxeGridInstance,
  VxeTableDefines,
} from '@/components/VxeTable';

import { BasicTable, useTable, TableAction } from '@/components/Table';

import { useDrawer } from '@/components/Drawer';

import {onMounted, reactive, ref} from 'vue';

import FormModal from './FormModal.vue';

import { vxeTableColumns,vxeTableFormSchema } from './role.data';
import { useMessage } from "@/hooks/web/useMessage";
import {Button, Modal} from 'ant-design-vue';
import { useGo } from "@/hooks/web/usePage";
import { kqDeptList,kqDeptRemove } from '@/api/heng/production';

const go = useGo();

defineOptions({ name: 'ywDeptList' });
const { createMessage } = useMessage();

// const [register, { openModal, closeModal }] = useModal();
const [register, { openDrawer,closeDrawer }] = useDrawer();

const loading=ref(false);
const msgList = ref([]);
const applyViewShow = ref(false);

const tableRef = ref<VxeGridInstance>();

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: vxeTableColumns,
  filterConfig: {
    remote: true,
  },
  exportConfig:{},
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },
  formConfig: {
    // enabled: true,
    items: vxeTableFormSchema,
  },
  pagerConfig: {
    pageSize: 20,
  },
  proxyConfig: {
    props: {
      result: 'data.list',
      list: 'data.list',
      total: 'data.totalResult',
      message: 'message',
    },
    filter: true,
    ajax: {
      query: ({ page, form, filters }) => {
        return findPageList(page, form, filters);
      },
    },
  },
});

function findPageList(page, form, filterList?: VxeTableDefines.FilterCheckedParams<any>[]) {
  let json = {};
  if (filterList && filterList.length) {
    filterList.forEach((e) => {
      const value = e.datas[0];
      let field = e.field;
      json[field] = value;
    });
  }
  return kqDeptList({
    page: page.currentPage,
    pageSize: page.pageSize,
    ...form,
    ...json,
  });
}


function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
  });
}

onMounted(() => {
  // dd.ready(function() {
  //
  // }
})


function handleEdit(record: Recordable) {
  record.isUpdate=true;
  openDrawer(true, record);

}



function handleDelete(record: Recordable) {
  record.loading = true;
  kqDeptRemove({id:record.id}).then(res => {
    if(res.code === 200) {
      record.loading = false;
      tableRef.value.commitProxy('reload');
    }else {
      createMessage.error(res.message);
    }
  }).finally(()=>{
    record.loading = false;
  });
}

function handleSuccess() {
  tableRef.value.commitProxy('query');

}


function applyViewOpen() {
  applyViewShow.value = true;
}

function applyViewClose() {
  applyViewShow.value = false;
}








</script>
